<script>
/**
 *二维码登入流程
  *返回得是个地址生成二维码
 */
import socketIo from "socket.io-client";
import qrcode from "qrcode";
import * as api from "@/api/user.js";
import invalidImg from "@/assets/img/red.png";
import successImg from "@/assets/img/scancode.png";
import  storeApi from "@/utils/storeage.js"
export default {
    data() {
        return {
            //二维码图片
            imgSrc: "",
            //遮罩
            showMask:true,
            //成功
            maskBg: { backgroundImage: `url(${successImg})` },
            //失败
            // maskBgError:{background:url(invalidImg)},
            loading:false,
            changeText:"打开微信扫一扫"
        }
    },
    props:{
        storageUserInfo:{
            required:true
        }
    },
    created() {
        //建立socket链接
        this.loading = true;
        let io = socketIo("wss://chst.vip");
        //监听连接事件["成功的！！！"]
        io.on("connectSuccess", async ({ state, sid }) => {
            //将sid存到本地
            storeApi.set("cgSid",sid);
            this.getQrUrl(sid);
        });
        //监听无效的方法
        io.on("invalidCode", (data) => {
            //data 返回二维码失效的信息
            //无效的时候展示遮罩
            this.maskBg.backgroundImage =`url(${invalidImg})`;
            this.loading = false;
            this.showMask = true;
            this.changeText="点击刷新二维码"
        });
        //定义扫码成功的方法
        io.on("scancodeSuccess", async({state,wechatCode,msg})=>{
              if(state){
                //发起登入请求
                let res = await api.getwechatLogin(wechatCode);
                this.storageUserInfo(res.data);
                this.$router.push("/")
              }
        })
    },
    methods: {
          //获取二维码
         async getQrUrl(sid){
                //获取二维码接口
                //获取而那
                let res = await api.getQrcodeApi(sid);
                // console.log(res.data.scanCodeUrl);
                //通过qrcode插件生成二维码
                qrcode.toDataURL(res.data.scanCodeUrl, (err, img) => {
                    if (err) throw err;
                    //将img复制给个什么东西
                    this.imgSrc = img;
                    this.showMask= false;
                    this.loading = false
                })
          },
          //刷新二维码
          updataQr(){
            this.getQrUrl(storeApi.get("cgSid"));
          }
    }
}
</script>


<template>
    <div id="qrCode">
        <div class="img" v-loading="loading">
            <img :src="imgSrc" alt="" width="200px">
            <i class="mask" v-show="showMask" :style="maskBg" @click="updataQr"></i>
            <p>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-weixin"></use>
                </svg>
                <b>{{changeText}}</b>
            </p>
        </div>
    </div>
</template>

<style lang="scss" scoped>
#qrCode {
    position: relative;

    img {
        display: inline-block;
        width: 200px;
        height: 200px;
    }

    .mask {
        width: 200px;
        height: 200px;
        background-color: #fff;
        background-image: url(@/assets/img/red.png);
        position: absolute;
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: 50%;
        left: 100px;
        opacity: .8;
        ;
    }
}
</style>
